var btn = document.getElementById('kaishi');
var div = document.querySelector('div');

btn.addEventListener('click', function() {
div.style.display = 'block';
btn.style.display = 'none';
});

var button = document.getElementById('chaxun')
var rili = function() {
	button.style.display = 'none';
	var year = document.getElementById('nian');
	var month = document.getElementById('yue');	
	var x = Number(year.value);
	var y = Number(month.value);
	if (year.value == '') {
		alert('请输入年份');	
		button.style.display = 'block';	
		return;
	}
	if (month.value == '') {
		alert('请输入月份');	
		button.style.display = 'block';
		return;
	}
	
	if (x < 1900) {
		alert('1900年之前的,人家算不到啊-.-||');
		button.style.display = 'block';
		year.value = '';
		return;
		
	}
	if (y <1 || y>12) {
		alert('有这个月份么,我怎么布吉岛0.0');
		button.style.display = 'block';
		month.value = '';
		return;		
	}
	var sum = 0;
	for(var i = 1900; i < x; i++) {
		if(i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
			sum += 366;
		} else {
			sum += 365;
		}
	}
	var day = 0;
	switch(y) {
		case 12:
			day += 30;
		case 11:
			day += 31;
		case 10:
			day += 30;
		case 9:
			day += 31;
		case 8:
			day += 31;
		case 7:
			day += 30;
		case 6:
			day += 31;
		case 5:
			day += 30;
		case 4:
			day += 31;
		case 3:
			if(x % 4 == 0 && x % 100 != 0 || x % 400 == 0) {
				day += 29;
			} else {
				day += 28;
			}
		case 2:
			day += 31;
		case 1:
			day += 1;
			break;
	}
	sum = sum + day;
	var week = sum % 7;
	var n = '';
	for(var i = 0; i < week; i++) {
		// n += '&nbsp;'
		// n += '&#8194;'	//半个中文
		// n += '&#8197;'  //1/4个中文
		// n += '&#8195;'  //一个中文
		//一个0-9数字=半个中文字符的宽度  一个两位数= &nbsp;
		n += '&nbsp;' + '&nbsp;';
	}

	/*输出1，3，5，7，8，10，12月的天数*/
	var m = '';
	if(y == 1 || y == 3 || y == 5 || y == 7 || y == 8 || y == 10 || y == 12) {
		for(var i = 1; i <= 31; i++) {
			if(sum % 7 == 6) {
				if(i < 10) {
					m += '&#8194;' + String(i) + '<br />';
				} else {
					m += String(i) + '<br />';
				}
			} else {
				// if(i < 10) {
					// m += '&#8194;' + String(i) + '&nbsp;';
// 
				// } else {
					// m += String(i) + '&nbsp;';
				// }
				i <10 ? m += '&#8194;' + String(i) + '&nbsp;' : m += String(i) + '&nbsp;'

			}
			sum++;
		}

	} else {
		//判断2月份的天数
		if(y == 2) {
			if(x % 4 == 0 && x % 100 != 0 || x % 400 == 0) {

				for(var i = 1; i <= 29; i++) {
					if(sum % 7 == 6) {
						if(i < 10) {
							m += '&#8194;' + String(i) + '<br />';
						} else {
							m += String(i) + '<br />';
						}
					} else {
						if(i < 10) {
							m += '&#8194;' + String(i) + '&nbsp;';

						} else {
							m += String(i) + '&nbsp;';
						}
					}
					sum++;
				}

			} else {
				for(var i = 1; i <= 28; i++) {
					if(sum % 7 == 6) {
						if(i < 10) {
							m += '&#8194;' + String(i) + '<br />';
						} else {
							m += String(i) + '<br />';
						}
					} else {
						if(i < 10) {
							m += '&#8194;' + String(i) + '&nbsp;';

						} else {
							m += String(i) + '&nbsp;';
						}
					}
					sum++;
				}
			}
		}
		/*输出其他月份天数*/
		else {
			for(var i = 1; i <= 30; i++) {
				if(sum % 7 == 6) {
					if(i < 10) {
						m += '&#8194;' + String(i) + '<br />';
					} else {
						m += String(i) + '<br />';
					}
				} else {
					if(i < 10) {
						m += '&#8194;' + String(i) + '&nbsp;';

					} else {
						m += String(i) + '&nbsp;';
					}
				}
				sum++;
			}

		}

	}
	var body = document.querySelector('body');
	var a = x % 12;
	body.style.backgroundImage = 'url(img/' + a + '.jpg)';
	var form = document.querySelector('form');
	var btn2 = document.createElement('button');
	btn2.innerHTML = '查询其他年月';
	form.appendChild(btn2);
	var section = document.createElement('section');
	section.setAttribute('style', 'width: 500px; height: 300px; margin: 0 auto; font-size: 35px;margin-top: 200px; color: #00BFFF;')
	document.body.appendChild(section);
	section.innerHTML = '日&nbsp;一&nbsp;二&nbsp;三&nbsp;四&nbsp;五&nbsp;六<br />' + n + m;
	btn2.onclick = function () {
		body.style.backgroundImage = 'none';
		button.style.display = 'block';
		btn2.style.display = 'none';
		section.style.display = 'none';
		year.value = '';
		month.value = '';
		
	}
	
}
button.onclick = rili;